<template>
        <div class="column">
            <div class="tt">
                <h3>公告<i class="iconfont icon-redian" style="color: orangered;"></i></h3>
            </div>
            <div class="main">
                <ul>
                    <li v-for="(item,index) in list" :key="index" class="li-text">
                        <div class="text" @click="toPromotion(item.id)">
                            {{ item.title }}
                        </div><span class="span-text" :style="{color: item.type == '系统公告'?'red':'green'}">{{item.type}}</span>
                    </li>
                </ul>
            </div>
        </div>
  </template>
  
  <script>
  import { mapMutations } from 'vuex';
  import {PromotionSearch} from '@/request/api'
  export default {
    data(){
      return{
        list:[]
      }
    },
    methods:{
        ...mapMutations({
            setIsShowNav:'navStatus/setIsShowNav'
        }),
      toPromotion(id){
          this.$router.push({
            path:'/promotion/'+id,
          })
          this.setIsShowNav(false)
      }
    },
    async created(){
      // 得到前五的数据
      let res = await PromotionSearch()
      this.list = res.data.data
    }
  }
  </script>
  
  <style scoped>
   
  /*清除样式*/
  body,div,ul,li,h3,a{
      padding: 0;
      margin: 0;
  }
  ul{
      list-style: decimal;
  }
   
  .column{
      /* width: 328px; */
      width: 98%;
      margin-right: 10px;
      border: 1px solid #ccc;
  }
  .column .img{
      float: right;
      width: 100px;
      height: 35px;
      margin-right: 10px;
  }
  .tt{
      height: 35px;
      border-bottom: 1px solid #ccc;
  }
  .tt h3{
      float: left;
      height: 35px;
      line-height: 35px;
      text-indent: 0.5em;
      font-family: "微软雅黑";
      width: 150px;
      border-bottom: 1px solid #56a3df;
  }
  .main{
      font-size: 14px;
      margin: 0px 5px 0px 5px;
  }
  .column ul li {
      margin: 10px 10px 10px 0px;
      text-indent: 1em; /*缩进*/
  }
  .column ul li span {
      float: right;
  }
  .column ul li a:hover{
      text-decoration: underline;
      color: red;
  }
  .column li a:link,a:visited{
      text-decoration: none;
      color: black;
  }
  .li-text{
      display: flex;
      flex-direction: row;
      position: relative;
      margin-bottom: 2px;
  }
  .text{
      width: 60%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid transparent;
  }
  .span-text{
      position: absolute;
      right: 0;
  }
  .text:hover{
      color: #409EFF;
      border-bottom:1px solid rgb(179,216,255);
      cursor: pointer;
  }
  </style>
  